<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            font-family: "Source Sans Pro",sans-serif;
            font-weight: 400;
            -moz-osx-font-smoothing: auto;
            margin: 0;
            padding: 0;
        }

        .tippy-box {
            font-size: clamp(8px, 2vw, 10px);
        }

        .image-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .image-container img {
            width: 100%;
            height: auto;
            display: block;
        }

        .blocks-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* This ensures clicks go through to SVG elements */
        }

        .blocks-overlay rect.block {
            fill-opacity: .2;
            stroke-opacity: .5;
            pointer-events: auto; /* This ensures clicks are captured by rectangles */
        }

        .blocks-overlay rect.block:hover {
            stroke-opacity: 1;
            cursor: pointer;
        }

        #block-info-dialog {
            width: 80%;
            max-width: 600px;
            max-height: 80vh;
            border-radius: 8px;
            border: 1px solid #ccc;
            padding: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        #block-info-dialog button.close-button {
            font-size: clamp(16px, 3vw, 20px);
            position: absolute;
            top: 8px;
            right: 8px;
            margin: 0;
            border: 0;
            background: 0 0;
            padding: 0 4px;
            cursor: pointer;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #block-info-dialog button.close-button:focus {
            outline: 0;
        }

        #block-info-dialog button.close-button::after {
            content: "╳";
        }

        #block-info-dialog button.copy-json-button {
            font-size: clamp(8px, 2vw, 10px);
            color: #bababa;
            cursor: pointer;
            position: absolute;
            bottom: 8px;
            right: 8px;
            border: 0;
            background: 0 0;
            padding: 4px 8px;
        }

        #block-info-dialog button.copy-json-button:hover {
            color: #666;
        }

        #block-info-dialog button.copy-json-button:active {
            color: #000;
        }

        #block-info-dialog h1 {
            margin: 0 0 16px;
            text-align: left;
            font-size: clamp(14px, 3vw, 18px);
            padding-right: 24px; /* Space for close button */
        }

        #block-info-dialog .text-content {
            overflow-y: auto;
            font-family: monospace;
            white-space: pre-wrap;
            font-size: clamp(10px, 2vw, 14px);
            max-height: 40vh;
            margin-bottom: 16px;
        }

        #block-info-dialog .images {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
            margin-bottom: 24px; /* Space for copy button */
        }

        #block-info-dialog .images img {
            max-width: 45%;
            height: auto;
        }

        @media screen and (max-width: 768px) {
            #block-info-dialog {
                width: 90%;
            }

            #block-info-dialog .images img {
                max-width: 100%;
            }
        }

        @media screen and (max-width: 480px) {
            #block-info-dialog .text-content {
                max-height: 30vh;
            }
        }
    </style>
  </head>
  <body>
    <div class="image-container">
      <dialog id="block-info-dialog">
        <button
          class="close-button"
          onclick="document.querySelector('#block-info-dialog').close()"
        ></button>
        <h1></h1>
        <div class="text-content"></div>
        <div class="images"></div>
        <button
          class="copy-json-button"
          onclick="navigator.clipboard.writeText(this.parentNode.dataset.blockJSON)">
          copy block JSON
        </button>
      </dialog>
      <img
        src="$image_data_url"
        alt="Image"
      />
      <svg
        class="blocks-overlay"
        preserveAspectRatio="xMidYMid meet"
      ></svg>
    </div>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      const f = () => {
        const BLOCKS = $blocks_json;
        const COLORS = $colors_json;
        const BLOCK_TYPES = $block_types_json;
        const blocksById = {};
        const blockInfoDialog = document.querySelector("dialog#block-info-dialog");

        // Handle resizing for responsive SVG
        function updateSVGSize() {
          const image = document.querySelector('.image-container img');
          const svg = document.querySelector('.blocks-overlay');

          // Set SVG dimensions to match the displayed image size
          svg.setAttribute('width', image.clientWidth);
          svg.setAttribute('height', image.clientHeight);
        }

        // Initialize and update on resize
        window.addEventListener('resize', updateSVGSize);
        window.addEventListener('load', updateSVGSize);

        function blockTypeColor(blockType) {
          return COLORS[BLOCK_TYPES[blockType] % COLORS.length];
        }

        function traverseAndGenerateSVG(block) {
          let svg = "";

          if (block.polygon) {
            const color = blockTypeColor(block.block_type);

            // dollar signs are escaped because this files gets read into a template string
            svg += `<rect id="$${block.id}"
                                class="block type-$${block.block_type}"
                                data-type="$${block.block_type}"
                                x="$${block.polygon[0][0]}" y="$${block.polygon[0][1]}"
                                width="$${
                                  block.polygon[1][0] - block.polygon[0][0]
                                }"
                                height="$${
                                  block.polygon[3][1] - block.polygon[1][1]
                                }"
                                fill=$${color} stroke=$${color}>
                          </rect>`;

            blocksById[block.id] = block;
          }

          if (Array.isArray(block.children) && block.children.length > 0) {
            block.children.forEach((child) => {
              svg += traverseAndGenerateSVG(child);
            });
          }

          return svg;
        }

        if (Object.keys(BLOCKS).length == 0) {
          // bail out if no blocks
          return;
        }

        const [vbWidth, vbHeight] = BLOCKS.children[0].polygon[2];
        document
            .querySelector("svg")
            .setAttribute("viewBox", `0 0 $${vbWidth} $${vbHeight}`);

        const blocksOverlay = document.querySelector(".blocks-overlay");
        blocksOverlay.innerHTML = traverseAndGenerateSVG(BLOCKS.children[0]);

        // Initialize tippy with responsive settings
        tippy("rect.block", {
            content: (block) => block.getAttribute("data-type"),
            placement: "top-start",
            arrow: false,
            offset: [0, 5],
            maxWidth: 200,
        });

        blocksOverlay.addEventListener("click", (event) => {
            if (event.target.tagName !== "rect") return;

            const blockId = event.target.id;
            const block = blocksById[blockId];

            blockInfoDialog.querySelector("h1").innerHTML = `
              $${blockId} <span style="color: $${blockTypeColor(block.block_type)}">($${block.block_type})</span>
            `;
            blockInfoDialog.querySelector(".text-content").textContent = block.html;

            blockInfoDialog.dataset.blockJSON = JSON.stringify(block, null, 2);

            if (block.images) {
                const imagesDiv = blockInfoDialog.querySelector(".images");
                imagesDiv.innerHTML = "";
                for ([id, image] of Object.entries(block.images)) {
                  const img = document.createElement("img");
                  img.src = "data:image/jpeg;base64," + image;
                  imagesDiv.appendChild(img);
                }
            }
            blockInfoDialog.showModal();
        });

        // Initial sizing
        updateSVGSize();
      };

      // Run the function when DOM is loaded
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', f);
      } else {
        f();
      }
    </script>
  </body>
</html>